<template>
  <div class="ques_main front-color">
    <div class="ques_main_content">
      <ul class="ques_tag clearfix">
        <li @click="questab('LaunchQues')" class="tab pointer" :class="{tab_switch:current === 'LaunchQues' }">{{$t('user.questions.ask')}}</li>
        <li @click="questab('ListQues')" class="tab pointer" :class="{tab_switch:current === 'ListQues'}">{{$t('user.questions.questionList')}}</li>
      </ul>
      <template>
        <!-- 发起提问 -->
        <div class="ques" v-show="current === 'LaunchQues'">
          <question :marketSide="marketSide"></question>
        </div>
        <!-- 问题列表 -->
        <div class="ques_list" v-show="current === 'ListQues'">
          <div class="loading" v-if="loadingShow">
            <loading></loading>
          </div>
          <div class="list" v-else>
            <table class="list-table">
              <thead>
                <tr>
                  <th v-for="(item,index) in internList" :key="index">{{item}}</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,index) in rqInfoList " :key="index" v-if="rqInfoList.length > 0">
                  <td>{{item.id}}</td>
                  <td >{{item.rqTypeText}}</td>
                  <td class="content" width='450'>{{item.rqDescribe}}</td>
                  <td>{{item.ctime}}</td>
                  <td>{{item.rqStatusText}}</td>
                  <td class="state state-color"><span @click="see(item.id)">{{$t('user.questions.see')}}</span> <span  @click="dele(index,item.id)">{{$t('user.questions.delete')}}</span></td>
                </tr>
              </tbody>
            </table>
            <Vpagination v-if="(pagination.count/pagination.pageSize) > 1"
               :total="pagination.count"
               :current-page='pagination.page'
               :display='pagination.pageSize'
               @pagechange="prochage($event)">
            </Vpagination>
            <p v-if="rqInfoList.length < 1" class="record">{{$t('user.questions.no_data')}}</p>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import question from '@/components/page/question/addVue/question'
import InlineInput from '@/components/common/inlineInput'
import loading from '../common/loadingModel'
import Vpagination from '@/components/common/pagination'
export default {
  name: 'questions',
  data () {
    return {
      marketSide: 'exQue',
      current: 'LaunchQues',  // 默认显示发起提问
      // 问题列表分页
      pagination: {
        count: '',
        pageSize: 10,
        page: 1
      },
      loadingShow: false,
      // 列表数据
      rqInfoList: []
    }
  },
  components: { question, InlineInput, loading, Vpagination },
  computed: {
    internList () {
      return [
        this.$t('user.questions.pronum'),
        this.$t('user.questions.proType'),
        this.$t('user.questions.prodesc'),
        this.$t('user.questions.subTime'),
        this.$t('user.questions.prostate')
      ]
    }
  },
  mounted () {
    if (this.$store.state.mesage.probleReturn) {
      this.questab(this.$store.state.mesage.probleReturn)
    }
  },
  watch: {
    '$store.state.baseData._lan' (val) {
      this.questData()
    }
  },
  methods: {
    // tab切换
    questab (tag) {
      let _this = this
      this.current = tag
      this.loadingShow = true
      setTimeout(function () {
        _this.questData()
      }, 500)
      if (tag === 'LaunchQues') {
        // this.tip_list()
      }
    },
    // 获取列表数据
    questData () {
      this.axios({
        url: this.$store.state.url.personal.quest_list,
        headers: {},
        params: {
          page: this.pagination.page,
          pageSize: this.pagination.pageSize
        },
        method: 'post'
      }).then((data) => {
        if (data.code === '0') {
          this.loadingShow = false
          var res = data.data.rqInfoList
          // 处理时间戳
          for (let i = 0; i < res.length; i++) {
            res[i].ctime = this._P.formatTime(res[i].ctime)
          }
          this.rqInfoList = data.data.rqInfoList
          this.pagination.count = data.data.count
        } else {
          this.$store.dispatch('setTipState', {text: data.msg, type: 'error'})
        }
      })
    },
    // 查看
    see (v) {
      localStorage.setItem('promId', v)
      this.$store.commit('PROBLEM', v)
      this.$router.push({ path: '/personal/detail' })
    },
    // 删除
    dele (v, id) {
      this.rqInfoList.splice(v, 1)
      this.axios({
        url: this.$store.state.url.personal.quest_delete,
        headers: {},
        params: {
          id: id
        },
        method: 'post'
      }).then((data) => {
        if (data.code === '0') {
          this.$store.dispatch('setTipState', this.$t('user.questions.delete_succ'))
          this.questData()
        } else {
          this.$store.dispatch('setTipState', {text: data.msg, type: 'error'})
        }
      })
    },
    // 分页
    prochage (page) {
      this.loadingShow = true
      let _this = this
      this.pagination.page = page
      setTimeout(function () {
        _this.questData()
      }, 500)
    }
  }
}
</script>
